<template>
	<view class="calendar-page">
		<!-- 状态栏占位 -->


		<!-- 本月打卡统计 -->
		<view class="stats-card">
			<text class="stats-title" style="padding-bottom: 40px">本月打卡统计</text>
			<view class="stats-row" style="padding-top: 20px">
				<view class="stat-item">
					<text class="stat-number blue">{{ monthStats.checkinDays }}</text>
					<text class="stat-label">打卡天数</text>
				</view>
				<view class="stat-item">
					<text class="stat-number blue">{{ monthStats.continuousDays }}</text>
					<text class="stat-label">连续天数</text>
				</view>
			</view>
		</view>

		<!-- 日历区域 -->
		<view class="calendar-container">
			<view class="calendar-header">
				<text class="month-text">{{ currentMonth }}月</text>
				<text class="checkin-info">打卡天数: {{ monthStats.checkinDays }}/{{ monthDays }}</text>
			</view>

			<!-- 星期标题 -->
			<view class="weekdays">
				<text class="weekday" v-for="day in weekDays" :key="day">{{ day }}</text>
			</view>

			<!-- 日历网格 -->
			<view class="calendar-grid">
				<!-- 前置空白 -->
				<view class="calendar-cell empty" v-for="n in firstDayOfWeek" :key="'empty-' + n"></view>

				<!-- 日期 -->
				<view class="calendar-cell" :class="{
            'checked': checkedDays.includes(day),
            'today': isToday(day)
          }" v-for="day in monthDays" :key="day">
					<text class="day-number">{{ day }}</text>
				</view>
			</view>
		</view>

		<!-- 上个月日历 -->
		<view class="calendar-container last-month">
			<view class="calendar-header">
				<text class="month-text">{{ lastMonth }}月</text>
				<text class="checkin-info">打卡天数: {{ lastMonthStats.checkinDays }}/{{ lastMonthDays }}</text>
			</view>

			<!-- 星期标题 -->
			<view class="weekdays">
				<text class="weekday" v-for="day in weekDays" :key="day">{{ day }}</text>
			</view>

			<!-- 日历网格 -->
			<view class="calendar-grid">
				<!-- 前置空白 -->
				<view class="calendar-cell empty" v-for="n in lastMonthFirstDay" :key="'last-empty-' + n"></view>

				<!-- 日期 -->
				<view class="calendar-cell" :class="{
            'checked': lastMonthCheckedDays.includes(day)
          }" v-for="day in lastMonthDays" :key="'last-' + day">
					<text class="day-number">{{ day }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Category from '@/api/category.js'
	export default {
		data() {
			return {
				statusBarHeight: 0,
				currentMonth: 6,
				lastMonth: 5,
				monthDays: 30,
				lastMonthDays: 31,
				firstDayOfWeek: 6, // 6月1日是周六，所以前面有6个空白
				lastMonthFirstDay: 3, // 5月1日是周三，所以前面有3个空白
				weekDays: ['', '一', '二', '三', '四', '五', '六', '七'],
				monthStats: {
					checkinDays: 0,
					continuousDays: 0
				},
				lastMonthStats: {
					checkinDays: 0
				},
				// 当月打卡的日期
				checkedDays: [],
				// 上月打卡的日期
				lastMonthCheckedDays: []
			}
		},
		onLoad() {
			this.getSystemInfo()
			this.getCheckInCalendarData()
			this.initCalendarData()
		},
		methods: {
			getSystemInfo() {
				const systemInfo = uni.getSystemInfoSync()
				this.statusBarHeight = systemInfo.statusBarHeight || 0
			},


			async getCheckInCalendarData() {
				const resp = await Category.getCheckInCalendarData();
				if (resp.code === 0 && resp.data) {
					this.checkedDays = resp.data.currentMonthCheckInDates || [];
					console.log("this.checkedDays:"+this.checkedDays)
					this.lastMonthCheckedDays = resp.data.lastMonthCheckInDates || [];
					this.lastMonthStats.checkinDays = resp.data.lastCheckinDays;
					this.monthStats.checkinDays = resp.data.checkinDays;
					this.monthStats.continuousDays = resp.data.continuousDays;
				}
			},


			initCalendarData() {
				// 初始化日历数据
				const now = new Date()
				this.currentMonth = now.getMonth() + 1
				this.lastMonth = this.currentMonth - 1

				// 计算当月天数
				this.monthDays = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate()

				// 计算上月天数
				this.lastMonthDays = new Date(now.getFullYear(), now.getMonth(), 0).getDate()

				// 计算当月第一天是星期几
				const firstDay = new Date(now.getFullYear(), now.getMonth(), 1).getDay()
				this.firstDayOfWeek = firstDay === 0 ? 6 : firstDay - 1

				// 计算上月第一天是星期几
				const lastFirstDay = new Date(now.getFullYear(), now.getMonth() - 1, 1).getDay()
				this.lastMonthFirstDay = lastFirstDay === 0 ? 6 : lastFirstDay - 1

				// 更新统计数据
				this.monthStats.checkinDays = this.checkedDays.length
				this.monthStats.continuousDays = this.calculateContinuousDays()
			},

			calculateContinuousDays() {
				// 计算连续打卡天数
				const today = new Date().getDate()
				let continuous = 0

				for (let i = today; i >= 1; i--) {
					if (this.checkedDays.includes(i)) {
						continuous++
					} else {
						break
					}
				}

				return continuous
			},

			isToday(day) {
				const today = new Date()
				return day === today.getDate() && this.currentMonth === (today.getMonth() + 1)
			},

			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.calendar-page {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.status-bar {
		background-color: #fff;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px 20px;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;

		.back-btn {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;

			.back-icon {
				font-size: 24px;
				color: #333;
				font-weight: bold;
			}
		}

		.header-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
		}

		.placeholder {
			width: 40px;
		}
	}

	.stats-card {
		margin: 20px;
		padding: 20px;
		background-color: #f8f9fa;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

		.stats-title {
			font-size: 16px;
			font-weight: 600;
			color: #333;
			margin-bottom: 15px;
			padding-bottom: 40px
		}

		.stats-row {
			display: flex;
			justify-content: space-around;

			.stat-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.stat-number {
					font-size: 32px;
					font-weight: bold;
					margin-bottom: 5px;

					&.blue {
						color: #4A90E2;
					}
				}

				.stat-label {
					font-size: 14px;
					color: #666;
				}
			}
		}
	}

	.calendar-container {
		margin: 0 20px 20px;
		padding: 20px;
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

		&.last-month {
			margin-top: 0;
		}

		.calendar-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;

			.month-text {
				font-size: 18px;
				font-weight: 600;
				color: #333;
			}

			.checkin-info {
				font-size: 14px;
				color: #666;
			}
		}

		.weekdays {
			display: flex;
			margin-bottom: 10px;

			.weekday {
				flex: 1;
				text-align: center;
				font-size: 14px;
				color: #999;
				padding: 10px 0;
			}
		}

		.calendar-grid {
			display: flex;
			flex-wrap: wrap;

			.calendar-cell {
				width: calc(100% / 7);
				height: 45px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 8px;

				&.empty {
					// 空白单元格
				}

				&.checked {
					.day-number {
					    color: #333; /* 恢复默认文字颜色 */
					    border-radius: 8px;
					    width: 32px;
					    height: 32px;
					    display: flex;
					    flex-direction: column; /* 垂直排列 */
					    align-items: center;
					    justify-content: center;
					    position: relative;
					}
					
					/* 添加绿色圆点 */
					.day-number::after {
					    content: "·"; /* 圆点符号 */
					    color: #4CAF50; /* 绿色 */
					    font-size: 32px; /* 圆点大小 */
					    line-height: 1; /* 调整行高 */
					    position: absolute;
					    bottom: -15px; /* 定位到底部 */
					}
				}

				&.today {
					.day-number {
						background-color: #E3F2FD;
						color: #2196F3;
						border-radius: 8px;
						width: 32px;
						height: 32px;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: bold;
					}
				}

				.day-number {
					font-size: 16px;
					color: #333;
				}
			}
		}
	}
</style>